<template>
    <div class="deepseek-chat-container">
      <!-- 消息滚动区域 -->
      <div class="message-scroll-area" ref="scrollArea">
        <div v-for="(msg, index) in messages" :key="index" 
             :class="['message-bubble', msg.role  === 'user' ? 'user' : 'assistant']">
          <div class="bubble-content">{{ msg.content  }}</div>
        </div>
      </div>
   
      <!-- 输入区域 -->
      <div class="input-area">
        <el-input v-model="inputText" placeholder="输入问题..." 
                  @keyup.enter.native="sendMessage"  clearable>
          <template #append>
            <el-button type="primary" @click="sendMessage" 
                       :loading="isLoading">发送</el-button>
          </template>
        </el-input>
      </div>
    </div>
  </template>
   
  <script>
  import { ollamaChatStreaming } from '@/api/ai/chatBox';
  import { getToken } from "@/utils/auth"; // 确保引入认证模块 
   
  export default {
    name: 'chatBox',
    data() {
      return {
        messages: [],
        inputText: '',
        isLoading: false,
        eventSource: null 
      };
    },
    methods: {
      async sendMessage() {
        if (!this.inputText.trim()  || this.isLoading)  return;
        
        // 添加用户消息 
        this.messages.push({  role: 'user', content: this.inputText  });
        this.inputText  = '';
        this.isLoading  = true;
   
        try {
          // 创建 SSE 连接（携带 Token）
          this.eventSource  = await ollamaChatStreaming(
            this.messages[this.messages.length  - 1].content,
            getToken() // 注入认证令牌 
          );
   
          // 初始化助手消息 
          let assistantMsg = { role: 'assistant', content: '' };
          this.messages.push(assistantMsg); 
   
          // 流式数据处理器 
          this.eventSource.onmessage  = (event) => {
            if (event.data)  {
              assistantMsg.content  += event.data; 
              this.$nextTick(() => this.scrollToBottom()); 
            }
          };
   
          // 错误处理 
          this.eventSource.onerror  = (e) => {
            console.error('SSE  Error:', e);
            this.isLoading  = false;
            this.eventSource.close(); 
          };
   
        } catch (error) {
          console.error('API  Error:', error);
          this.isLoading  = false;
        }
      },
      scrollToBottom() {
        const container = this.$refs.scrollArea; 
        container.scrollTop  = container.scrollHeight; 
      }
    },
    beforeUnmount() {
      if (this.eventSource)  this.eventSource.close(); 
    }
  };
  </script>
   
  <style scoped>
  .deepseek-chat-container {
    height: 80vh;
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    overflow: hidden;
  }
   
  .message-scroll-area {
    height: calc(100% - 60px);
    padding: 15px;
    overflow-y: auto;
    background: #f8f9fa;
  }
   
  .message-bubble {
    margin: 10px 0;
    display: flex;
    transition: opacity 0.3s;
  }
   
  .user {
    justify-content: flex-end;
  }
   
  .assistant {
    justify-content: flex-start;
  }
   
  .bubble-content {
    max-width: 70%;
    padding: 12px 18px;
    border-radius: 15px;
    line-height: 1.5;
    word-break: break-word;
  }
   
  .user .bubble-content {
    background: #409eff;
    color: white;
  }
   
  .assistant .bubble-content {
    background: #ffffff;
    border: 1px solid #dcdfe6;
  }
   
  .input-area {
    padding: 15px;
    background: white;
    border-top: 1px solid #ebeef5;
  }
  </style>